/**
 * 课程表头部组件
 * 由两部分构成：标题栏、选择周次
 * 组件需要外部传入以下参数：
 * showWeek:表示当前显示的周次
 * currentWeek:表示当前真实的周次
 * totalWeeks:表示本学期一共多少周
 * changeShowWeek:函数，redux的dispatch方法，用于改变store里面的showWeek
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    FlatList,
    Image
} from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import PropTypes from 'prop-types';

import {
    TITLE_BG_COLOR,
    TITLE_WORD_COLOR,
    TITLE_BORDER_COLOR
} from '../../common/theme';

export default class Header extends Component {
    constructor(props){
        super(props);
        this.state = {
            isShowWeekList:false //参数用于表示选择周次是否显示
        }
    }
    render() {
        let iconName = this.state.isShowWeekList ? 'ios-arrow-up' :'ios-arrow-down';
        
        return (
            <View>
                <View style={styles.container}>
                    <Image source={require('../../img/logo.png')} style={styles.logo} />
                    <Text style={styles.title}>
                        课程表 - 第{ ' ' + this.props.showWeek + ' ' }周
                    </Text>
                    <TouchableOpacity
                        style={styles.touchable}
                        onPress={()=>this.setState({
                            isShowWeekList:!this.state.isShowWeekList
                        })} >
                        <Ionicons style={styles.icon} name={iconName} size={28} />
                    </TouchableOpacity>
                </View>
                {this.state.isShowWeekList ? <WeekList 
                    onPress={this.props.onPress} 
                    currentWeek={this.props.currentWeek}
                    totalWeeks={this.props.totalWeeks} /> : null}
            </View>
        )
    }
}

//选择周次的列表
class WeekList extends Component {
    render() {
        let data=[];
        let i,j;
        for(i = 0;i<this.props.totalWeeks;i++){
            j=i+1;
            data.push({key:['第 '+j+ ' 周',j]});
        }
        return (
            <View style={styles.weekList}>
                <WeekBtn name='当前周' val={this.props.currentWeek} onPress={this.props.onPress}/>
                <FlatList
                    data={data}
                    renderItem={({item}) => 
                        <WeekBtn name={item.key[0]} val={item.key[1]} onPress={this.props.onPress}/>
                    }
                    getItemLayout={(data, index) => ({length:70, offset: 70 * index, index})}
                    initialScrollIndex={this.props.currentWeek-1}
                    horizontal />
            </View>
        )
    }
}

class WeekBtn extends Component {
    render() {
        return (
            <TouchableOpacity 
                style={styles.weekBtn}
                onPress={() => this.props.onPress(this.props.val)} >
                <Text>{this.props.name}</Text>
            </TouchableOpacity>
        )
    }
}
WeekBtn.propTypes = {
    name: PropTypes.string.isRequired,
    val: PropTypes.number.isRequired
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        height: 45,
        backgroundColor: TITLE_BG_COLOR,
        paddingLeft: 20
    },
    logo: {
        width: 30,
        height: 30
    },
    title: {
        color: TITLE_WORD_COLOR,
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    icon: {
        color: TITLE_WORD_COLOR,
    },
    touchable: {
        height: 45,
        width: 55,
        position: 'absolute',
        right: 5,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center'
    },
    weekList:{
        flexDirection:'row' 
    },
    weekBtn:{
        height:40,
        width:70,
        justifyContent:'center',
        alignItems:'center',
        borderColor: TITLE_BORDER_COLOR,
        borderRightWidth: 1
    }
})